<template>
  <div>
    <a-input-search placeholder="搜索任务单" style="width: 400px" @search="onSearch"/>
    <br><br/>
    <a-table ref="TableInfo"
             :columns="columns"
             :rowKey="record => record.taskId"
             :dataSource="dataSource"
             :pagination="pagination"
             :loading="loading"
             :scroll="{ x: 600 }"
             @change="handleTableChange"
             size="middle">
      <template slot="operation" slot-scope="text, record">
        <a @click="audit(record)" title="办理">办理</a>
        &nbsp;
        <a @click="genProcessDiagram(record)" title="查看流程运行图">查看进展</a>
        &nbsp;
        <!-- <a  title="委托">委托</a> -->
      </template>
    </a-table>
    <a-modal
      title="流程运行图"
      :visible="modalVisible"
      @cancel="handleModalCancel"
    >
      <img :src="processImage" style="height: 300px;width: 500px">
    </a-modal>
    <node-deal-form
      ref="NodeDealForm"
      :NodeDealFormVisible="NodeDealForm.visible"
      :username="username"
      @close="handleNodeDealFormClose"
      @success="handleNodeDealFormSuccess">
    </node-deal-form>

    <div>
      <async-load-comp ref="AsyncLoadComp"
                       :asyncLoadCompVisible="AsyncLoadCompForm.visible"
                       @close="handleAsyncLoadCompFormClose"
                       @success="handleAsyncLoadCompFormSuccess" :comChilds="comp"
                       :checkParam="checkParam"></async-load-comp>
    </div>
  </div>
</template>
<script>

    import NodeDealForm from '@/views/dynamicForm/NodeDealForm'
    import AsyncLoadComp from "@/views/index/AsyncLoadComp"

    export default {
        name: 'WaitToDo',
        props: {
            username: {
                require: true
            }
        },
        data() {
            return {
                loading: false,
                dataSource: [],
                NodeDealForm: {
                    visible: false
                },
                AsyncLoadCompForm: {
                    visible: false
                },
                pagination: {
                    pageSizeOptions: ['5', '10'],
                    defaultCurrent: 1,
                    defaultPageSize: 5,
                    showQuickJumper: true,
                    showSizeChanger: true,
                    showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
                },
                comp: "",
                checkParam: {},
                processImage:"1",
                modalVisible: false
            }
        },
        components: {NodeDealForm, AsyncLoadComp},
        computed: {
            columns() {
                return [
                    {
                        title: '任务单编号',
                        dataIndex: 'procInstId'
                    }, {
                        title: '流程名称',
                        dataIndex: 'procDefName'
                    }, {
                        title: '发起人',
                        dataIndex: 'applicant'
                    }, {
                        title: '开始时间',
                        dataIndex: 'arrivalDate'
                    }, {
                        title: '当前环节',
                        dataIndex: 'currNode.nodeName'
                    },
                    {
                        title: '前审核人批注',
                        dataIndex: 'comment'
                    }, {
                        title: '操作',
                        dataIndex: 'operation',
                        scopedSlots: {customRender: 'operation'}
                    }]
            }
        },
        mounted() {
            this.fetch()
        },
        methods: {
            onSearch() {
                this.fetch()
            },
            handleNodeDealFormClose() {
                this.NodeDealForm.visible = false
            },
            handleNodeDealFormSuccess() {
                this.NodeDealForm.visible = false
                this.fetch()
                this.$message.success('提交成功')
            },
            handleAsyncLoadCompFormClose() {
                this.comp = "";
                this.checkParam = {};
                this.AsyncLoadCompForm.visible = false
            },
            handleAsyncLoadCompFormSuccess() {
                this.comp = "";
                this.checkParam = {};
                this.AsyncLoadCompForm.visible = false
                this.fetch()
                this.$message.success('提交成功')
            },
            genProcessDiagram: function (node) {
                // 数据加载完毕，关闭loading
                this.$get('upmpprocess/genProcessDiagram/'+node.procInstId).then((r) => {
                    this.processImage = "data:image/png;base64,"+r.data;
                    this.modalVisible = true;
                })
            },
            handleModalCancel: function (e) {
                this.processImage = "1";
                this.modalVisible = false;
            },
            audit: function (node) {
                this.comp = node.pagePath;
                this.checkParam = {
                    taskId: node.taskId,
                    procInstId: node.procInstId,
                    applicant: node.applicant,
                    nodeId: node.currNode.nodeId,
                    name: node.procDefName,
                    optFlag: "check",
                    childVisible: true,
                    bizData: node.bizData,
                    comment: node.comment,
                    auditStatus: node.auditStatus
                };
                this.AsyncLoadCompForm.visible = true;

                // 打开申请表单，并传入对应表单json、初始数据
                // 查询表单json
                // this.$get('form/' + node.currNode.formId).then((r) => {
                //   this.NodeDealForm.visible = true
                //   this.$refs.NodeDealForm.setFormValues({...r.data, ...node})
                // })
            },
            handleTableChange(pagination, filters, sorter) {
                // 将这三个参数赋值给Vue data，用于后续使用
                this.paginationInfo = pagination
                this.filteredInfo = filters
                this.sortedInfo = sorter
                this.fetch({
                    sortField: sorter.field,
                    sortOrder: sorter.order,
                    ...filters
                })
            },
            fetch(params = {}) {
                // 显示loading
                this.loading = true
                if (this.paginationInfo) {
                    // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
                    this.$refs.TableInfo.pagination.current = this.paginationInfo.current
                    this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
                    params.pageSize = this.paginationInfo.pageSize
                    params.pageNum = this.paginationInfo.current
                } else {
                    // 如果分页信息为空，则设置为默认值
                    params.pageSize = this.pagination.defaultPageSize
                    params.pageNum = this.pagination.defaultCurrent
                }
                // 数据加载完毕，关闭loading
                this.$get('upmpprocess/waitingtodo', {
                    userId: this.username,
                    ...params
                }).then((r) => {
                    let data = r.data
                    const pagination = {...this.pagination}
                    pagination.total = data.total
                    this.dataSource = data.rows
                    this.pagination = pagination
                    // 数据加载完毕，关闭loading
                    this.loading = false
                })
            }
        }
    }

</script>
<style scoped>
</style>
